import React from "react";
import {
    AutoCenter,
    Button,
    CheckList,
    Dialog, DotLoading,
    Form,
    Input,
    Modal,
    Popup,
    SearchBar, SpinLoading,
    TextArea,
    Toast
} from "antd-mobile";
import {withRouter} from "react-router-dom";
import cookie from "_react-cookies@0.1.1@react-cookies";

class EnturstWithPlanNum extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            signState:'',
            planNumber:'',
            reason:'',
            stap:'',
            bottonPopShow:false,
            trustee:'',
            dialogVisible:'',
            trusteeList:[],
            phone:'',
            planName:'',
            planType:'',
            dayPlan:'',
            planDate:'',
            name:'',
            trusteeId:'',




        }
    }



    submitProxy = () => {
        const url ='http://htjoa.nrnet.cn/dc14/construct/proxy/setproxy?phone='+this.state.phone+'&entrustedId='+this.state.trusteeId+'&entrustedName='+this.state.trustee+'&reason='+this.state.reason+'&planNumber='+this.state.planNumber;
        fetch(url, {
            method: "get",
        }).then(res=>res.json())
            .then(result=>{
                console.log(result)
                if (result["code"]==200){
                    Modal.alert({
                        content: '委托提交成功',
                        onConfirm: () => {
                            // TODO 跳转回主页
                            // Toast.show("返回主页")
                            this.props.history.push('/mainpage')
                        },
                    })
                }
                else {
                    Modal.alert({
                        content: '提交失败,请检查网络',
                        onConfirm: () => {
                            // TODO 跳转回主页
                            // Toast.show("返回主页")
                            // this.props.history.push('/dc14/const/index')
                            this.setState({bottonPopShow: false})
                        },
                    })
                }
            })




    }

    onFinish = (values: any) => {

        if (this.state.trustee.length > 0) {
            console.log(values)
            this.setState({planNumber: values["planNumber"]})
            this.setState({reason: values["reason"]})

            //提取计划信息
            const url ='http://htjoa.nrnet.cn/dc14/construct/plan/plan?planNumber='+values["planNumber"];
            fetch(url,{method:"GET"
            })
                .then(res=>res.json()).then(result=>{
                if (result["code"]=="200"){
                    console.log("计划信息",result)
                    this.setState({planName:result["name"]})
                    this.setState({planType:result["type"]})
                    this.setState({dayPlan:result["dayPlan"]})
                    this.setState({planDate:result["date"]})


                    //提取用户信息
                    const url1 ='http://htjoa.nrnet.cn/dc14/construct/user/user?phone='+this.state.phone;
                    fetch(url1,{method:"GET"
                    })
                        .then(res=>res.json()).then(result=>{
                        if (result["code"]=="200"){
                            console.log("人员信息",result)
                            this.setState({name:result["name"]})
                            this.setState({identifyId:result["id"]})
                            this.setState({post:result["post"]})
                            this.setState({ bottonPopShow:true})
                        }
                        else {
                            Toast.show("暂无该用户信息")
                        }
                    })
                }
                else {
                    Toast.show("请核对计划号")
                }

            })






        } else {
            return (
                Toast.show({
                    icon: 'fail',
                    content: '请选择受托人',
                    position: 'center',
                })
            )
        }


    }

    componentDidMount() {
        this.setState({phone:cookie.load("phone")})

        const url3 ='http://htjoa.nrnet.cn/dc14/construct/proxy/newproxy?phone='+this.state.phone;
        fetch(url3,{method:"GET"
        })
            .then(res=>res.json()).then(result=>{
            if (result["code"]=="200"){
                const messageNumber =result["messageNumber"]
                if (messageNumber != 0){
                    this.setState({messageNumber: result["messageNumber"]})
                }
            }
        })



    }

    render() {
        return (
            <div>
            <Form
                ref={this.refIns}
                onFinish={this.onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提取信息
                    </Button>
                }
                className='signForm'>
                <Form.Item label="受托人">
                    <Input value={this.state.trustee}/>
                    <Button
                        color='primary' fill='outline'
                        onClick={() => {
                            this.setState({dialogVisible: true})
                            const url2 ='http://htjoa.nrnet.cn/dc14/construct/user/trustee?phone='+this.state.phone;
                            fetch(url2,{method:"GET"
                            })
                                .then(res=>res.json()).then(result=>{
                                if (result["code"]=="200"){
                                    console.log(result["trustee"])
                                    this.setState({trusteeList:result["trustee"]})

                                }
                            })
                        }}
                    >
                        选择受托人
                    </Button>
                </Form.Item>
                <Form.Item
                    name='planNumber'
                    label="计划编号"
                    rules={[{required: true, message: '请填写计划编号'}]}
                >
                    <Input placeholder='请输入计划号' clearable/>
                </Form.Item>
                <Form.Item
                    name='reason'
                    label="委托原因"
                    rules={[{required: true, message: '请填写原因'}]}
                >
                    <TextArea
                        showCount
                        maxLength={200}
                    />
                </Form.Item>
            </Form>


                <Dialog

                    visible={this.state.dialogVisible}
                    content={(<CheckList
                        onChange={(value) => {
                            this.setState({trustee: value[0]["name"]})
                            this.setState({trusteeId:value[0]["id"]})
                            this.refIns.current.setFieldsValue({inOrOut: this.state.trustee})
                            console.log(value)
                        }}
                        style={{height: '250px', overflow: "scroll"}}>
                        <div>{
                            this.state.trusteeList.map((element, index) => {
                                return (<CheckList.Item key={index} value={element}>
                                    <AutoCenter>
                                        {element["name"]}
                                    </AutoCenter>

                                </CheckList.Item>)
                            })
                        }</div>
                    </CheckList>)}
                    closeOnAction
                    onClose={() => {this.setState({dialogVisible: false})}}
                    actions={[
                        {
                            key: 'close',
                            text: '确定',
                        },
                    ]}
                />

                {/*按计划号委托底部弹出组件*/}
                <>
                    <Popup
                        visible={this.state.bottonPopShow}
                        // visible = {true}
                        onMaskClick={() => {
                            this.setState({bottonPopShow: false})
                        }}
                        bodyStyle={{minHeight: '70vh'}}
                    >


                        <div style={{padding: "12px", fontSize: "large"}}>
                            <p>计划号: {this.state.planNumber}</p>
                            <p>项目名称: {this.state.planName}</p>
                            <p>日计划: {this.state.dayPlan}</p>
                            <p>施工日期: {this.state.planDate}</p>
                            <p>受托人: {this.state.trustee}</p>
                            <p>委托人: {this.state.name}</p>
                            <p>委托周期: {this.state.dayPlan} - {this.state.planDate}</p>
                            {/*/!*<p>委托周期: {this.state.startDate}-{this.state.endDate}</p>*!/*/}
                            <p>原因: {this.state.reason}</p>
                            <Button block className='signButton' color='primary ' size='large'
                                    style={{marginTop: "20px"}}
                                    onClick={this.submitProxy}>
                                提交委托
                            </Button>
                        </div>
                    </Popup>
                </>

            </div>
        )
    }
}
export default withRouter(EnturstWithPlanNum);